<!doctype  html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common::sources(title='Account Manage')"></head>
<body>
	<!-- 头部 -->
	<div th:include="components/header::navbar"></div>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<a class="menu-toggler" id="menu-toggler" href="#"> <span
				class="menu-text"></span>
			</a>
			<!-- 菜单 -->
			<div th:substituteby="components/leftbar::sidebar"></div>
			<!-- 主页面 -->
			<div class="main-content">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> <a href="#">首页</a></li>
						<li><a href="#">基本信息管理</a></li>
						<li class="active">用户管理</li>
					</ul>
				</div>
				<div class="page-content">
					<div class="page-header">
						<h1>
							用户管理 <small> <i class="icon-double-angle-right"></i> 新增用户
							</small>
						</h1>
					</div>
					<!-- /.page-header -->
					<div class="row">
						<div class="col-xs-12">
							<div class="row-fluid">
								<div class="span12">
									<div class="widget-box">
										<div
											class="widget-header widget-header-blue widget-header-flat">
											<h4 class="lighter">新增用户</h4>
										</div>
										<div class="widget-body">
											<div class="widget-main">
												<form class="form-horizontal" id="validation-form"
													method="post" action="/account/add">
													<div class="step-content row-fluid position-relative"
														id="step-container">
														<div class="step-pane active" id="step1">
															<h3 class="lighter block green">请填写以下信息</h3>
															<div class="form-group">
																<label
																	class="control-label col-xs-12 col-sm-3 no-padding-right"
																	for="accountName">账户名称</label>
																<div class="col-xs-12 col-sm-9">
																	<div class="clearfix">
																		<input type="text" name="accountName" id="accountName"
																			class="col-xs-12 col-sm-6" />
																	</div>
																</div>
															</div>
															<div class="space-2"></div>
															<div class="form-group">
																<label
																	class="control-label col-xs-12 col-sm-3 no-padding-right"
																	for="password">密码:</label>
																<div class="col-xs-12 col-sm-9">
																	<div class="clearfix">
																		<input type="password" name="password" id="password"
																			class="col-xs-12 col-sm-4" />
																	</div>
																</div>
															</div>
															<div class="space-2"></div>
															<div class="form-group">
																<label
																	class="control-label col-xs-12 col-sm-3 no-padding-right"
																	for="password2">确认密码:</label>
																<div class="col-xs-12 col-sm-9">
																	<div class="clearfix">
																		<input type="password" name="password2" id="password2"
																			class="col-xs-12 col-sm-4" />
																	</div>
																</div>
															</div>
															<div class="hr hr-dotted"></div>
															<div class="form-group">
																<label
																	class="control-label col-xs-12 col-sm-3 no-padding-right"
																	for="userName">姓名</label>
																<div class="col-xs-12 col-sm-9">
																	<div class="clearfix">
																		<input type="text" name="userName" id="userName"
																			class="col-xs-12 col-sm-6" />
																	</div>
																</div>
															</div>
															<div class="form-group">
																<label
																	class="control-label col-xs-12 col-sm-3 no-padding-right"
																	for="email">邮箱:</label>
																<div class="col-xs-12 col-sm-9">
																	<div class="clearfix">
																		<input type="email" id="email" name="email"
																			class="col-xs-12 col-sm-5" />
																	</div>
																</div>
															</div>
															<div class="space-2"></div>
															<div class="form-group">
																<label
																	class="control-label col-xs-12 col-sm-3 no-padding-right"
																	for="telephone">固定电话:</label>
																<div class="col-xs-12 col-sm-9">
																	<div class="input-group">
																		<span class="input-group-addon"> <i
																			class="icon-phone"></i>
																		</span> <input type="tel" id="telephone" name="telephone" />
																	</div>
																</div>
															</div>
															<div class="space-2"></div>
															<div class="hr hr-dotted"></div>
															<div class="form-group">
																<label
																	class="control-label col-xs-12 col-sm-3 no-padding-right">Subscribe
																	to</label>
																<div class="col-xs-12 col-sm-9">
																	<div>
																		<label> <input name="subscription" value="1"
																			type="checkbox" class="ace" /> <span class="lbl">
																				Latest news and announcements</span>
																		</label>
																	</div>
																	<div>
																		<label> <input name="subscription" value="2"
																			type="checkbox" class="ace" /> <span class="lbl">
																				Product offers and discounts</span>
																		</label>
																	</div>
																</div>
															</div>
															<div class="space-2"></div>
															<div class="form-group">
																<label
																	class="control-label col-xs-12 col-sm-3 no-padding-right">性别</label>
																<div class="col-xs-12 col-sm-9">
																	<div>
																		<label class="blue"> <input name="gender"
																			value="1" type="radio" class="ace" /> <span
																			class="lbl"> 男</span>
																		</label>
																	</div>
																	<div>
																		<label class="blue"> <input name="gender"
																			value="2" type="radio" class="ace" /> <span
																			class="lbl"> 女</span>
																		</label>
																	</div>
																</div>
															</div>
															<div class="hr hr-dotted"></div>
															<div class="form-group">
																<label
																	class="control-label col-xs-12 col-sm-3 no-padding-right"
																	for="state">State</label>
																<div class="col-xs-12 col-sm-9">
																	<select id="state" name="state" class="select2"
																		data-placeholder="Click to Choose...">
																		<option value="">&nbsp;</option>
																		<option value="AL">Alabama</option>
																		<option value="AK">Alaska</option>
																		<option value="AZ">Arizona</option>
																		<option value="AR">Arkansas</option>
																		<option value="CA">California</option>
																		<option value="CO">Colorado</option>
																		<option value="CT">Connecticut</option>
																		<option value="DE">Delaware</option>
																		<option value="FL">Florida</option>
																		<option value="GA">Georgia</option>
																		<option value="HI">Hawaii</option>
																		<option value="ID">Idaho</option>
																		<option value="IL">Illinois</option>
																		<option value="IN">Indiana</option>
																		<option value="IA">Iowa</option>
																		<option value="KS">Kansas</option>
																		<option value="KY">Kentucky</option>
																		<option value="LA">Louisiana</option>
																		<option value="ME">Maine</option>
																		<option value="MD">Maryland</option>
																		<option value="MA">Massachusetts</option>
																		<option value="MI">Michigan</option>
																		<option value="MN">Minnesota</option>
																		<option value="MS">Mississippi</option>
																		<option value="MO">Missouri</option>
																		<option value="MT">Montana</option>
																		<option value="NE">Nebraska</option>
																		<option value="NV">Nevada</option>
																		<option value="NH">New Hampshire</option>
																		<option value="NJ">New Jersey</option>
																		<option value="NM">New Mexico</option>
																		<option value="NY">New York</option>
																		<option value="NC">North Carolina</option>
																		<option value="ND">North Dakota</option>
																		<option value="OH">Ohio</option>
																		<option value="OK">Oklahoma</option>
																		<option value="OR">Oregon</option>
																		<option value="PA">Pennsylvania</option>
																		<option value="RI">Rhode Island</option>
																		<option value="SC">South Carolina</option>
																		<option value="SD">South Dakota</option>
																		<option value="TN">Tennessee</option>
																		<option value="TX">Texas</option>
																		<option value="UT">Utah</option>
																		<option value="VT">Vermont</option>
																		<option value="VA">Virginia</option>
																		<option value="WA">Washington</option>
																		<option value="WV">West Virginia</option>
																		<option value="WI">Wisconsin</option>
																		<option value="WY">Wyoming</option>
																	</select>
																</div>
															</div>
															<div class="space-2"></div>
															<div class="form-group">
																<label
																	class="control-label col-xs-12 col-sm-3 no-padding-right"
																	for="platform">Platform</label>
																<div class="col-xs-12 col-sm-9">
																	<div class="clearfix">
																		<select class="input-medium" id="platform"
																			name="platform">
																			<option value="">------------------</option>
																			<option value="linux">Linux</option>
																			<option value="windows">Windows</option>
																			<option value="mac">Mac OS</option>
																			<option value="ios">iOS</option>
																			<option value="android">Android</option>
																		</select>
																	</div>
																</div>
															</div>
															<div class="space-2"></div>
															<div class="form-group">
																<label
																	class="control-label col-xs-12 col-sm-3 no-padding-right"
																	for="comment">Comment</label>
																<div class="col-xs-12 col-sm-9">
																	<div class="clearfix">
																		<textarea class="input-xlarge" name="comment"
																			id="comment"></textarea>
																	</div>
																</div>
															</div>
															<div class="space-8"></div>
															<div class="form-group">
																<div class="col-xs-12 col-sm-4 col-sm-offset-3">
																	<label> <input name="agree" id="agree"
																		type="checkbox" class="ace" /> <span class="lbl">
																			I accept the policy</span>
																	</label>
																</div>
															</div>
														</div>
													</div>
												</form>
												<hr />
												<div class="row-fluid wizard-actions">
													<button class="btn btn-prev"
														onclick="window.location.href = '/account/accountlist'">
														<i class="icon-arrow-left"></i> Back
													</button>
													<button class="btn btn-success btn-next" type="submit"
														onclick="$('#validation-form').submit();">
														Submit
														<!-- <i class="icon-arrow-right icon-on-right"> </i>-->
													</button>
												</div>
											</div>
											<!-- /widget-main -->
										</div>
										<!-- /widget-body -->
									</div>
								</div>
							</div>
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
			<!-- /.main-content -->
		</div>
	</div>
	<!-- js 资源 -->
	<div th:include="components/footer::basescript"></div>
	<!-- form validate js sources-->
	<div th:include="components/form::validater"></div>
	<!-- inline scripts related to this page -->
	<script type="text/javascript">
		/*<![CDATA[*/
		jQuery(function($) {
			$(".select2").css('width', '200px').select2({
				allowClear : true
			}).on('change', function() {
				$(this).closest('form').validate().element($(this));
			});
			var $validation = true;
			$.mask.definitions['~'] = '[+-]';
			$('#telephone').mask('(999) 9999-9999');
			jQuery.validator.addMethod("telephone", function(value, element) {
				return this.optional(element)
						|| /^\(\d{3}\) \d{4}\-\d{4}( x\d{1,6})?$/.test(value);
			}, "Enter a valid phone number.");
			$('#validation-form')
					.validate(
							{
								errorElement : 'div',
								errorClass : 'help-block',
								focusInvalid : false,
								rules : {
									email : {
										required : true,
										email : true
									},
									password : {
										required : true,
										minlength : 6
									},
									password2 : {
										required : true,
										minlength : 6,
										equalTo : "#password"
									},
									userName : {
										required : true
									},
									accountName : {
										required : true
									},
									telephone : {
										required : true,
										telephone : 'required'
									},
									comment : {
										required : true
									},
									state : {
										required : true
									},
									platform : {
										required : true
									},
									subscription : {
										required : true
									},
									gender : 'required',
									agree : 'required'
								},
								messages : {
									email : {
										required : "Please provide a valid email.",
										email : "Please provide a valid email."
									},
									password : {
										required : "Please specify a password.",
										minlength : "Please specify a secure password."
									},
									subscription : "Please choose at least one option",
									gender : "Please choose gender",
									agree : "Please accept our policy"
								},
								invalidHandler : function(event, validator) { //display error alert on form submit   
									$('.alert-danger', $('.login-form')).show();
								},
								highlight : function(e) {
									$(e).closest('.form-group').removeClass(
											'has-info').addClass('has-error');
								},
								success : function(e) {
									$(e).closest('.form-group').removeClass(
											'has-error').addClass('has-info');
									$(e).remove();
								},
								errorPlacement : function(error, element) {
									if (element.is(':checkbox')
											|| element.is(':radio')) {
										var controls = element
												.closest('div[class*="col-"]');
										if (controls.find(':checkbox,:radio').length > 1)
											controls.append(error);
										else
											error.insertAfter(element.nextAll(
													'.lbl:eq(0)').eq(0));
									} else if (element.is('.select2')) {
										error
												.insertAfter(element
														.siblings('[class*="select2-container"]:eq(0)'));
									} else if (element.is('.chosen-select')) {
										error
												.insertAfter(element
														.siblings('[class*="chosen-container"]:eq(0)'));
									} else
										error.insertAfter(element.parent());
								}
							/* submitHandler: function (form) {
								$('#validation-form').submit();
							},
							invalidHandler: function (form) {
								alert("error");
							} */
							});
		})
		/*]]>*/
	</script>
</body>
</html>